<template>
  <div class="la-container-mian">
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="cs-p">
          <cs-tree
            :treeData="treeData"
            :title="treeTitle"
            :isFalseButton="isFalseButton"
            :showTitle="true"
            :showAdd="true"
            :addText="addText"
            @handleTree="handleTree"
            @handleNodeClick="handleNodeClick"
            @handleGroupDelete="handleGroupDelete"
            @handleTitle="handleTitle"
            ref="tree"/>
        </div>
      </el-col>
      <el-col :span="18">
        <div class="cs-p">
          <el-form
            :inline="true"
            size="small">
            <el-row>
              <el-col :span="12">
                <el-form-item >
                  <el-button-group>
                    <el-button
                    v-if="isAuth('sys:group:save')"
                    icon="el-icon-plus"
                    :disabled="disableFlag.add"
                    @click="handleCreate">新增</el-button>
                    <el-button
                      v-if="isAuth('sys:group:save')"
                      icon="el-icon-delete"
                      :disabled="disableFlag.delete"
                      @click="handleDelete">删除</el-button>
                  </el-button-group>
                </el-form-item>

                <!-- <el-form-item>
                  <el-button-group>
                    <el-button
                      icon="el-icon-check"
                      :disabled="disableFlag.state"
                      @click="handleState(1)">启用</el-button>

                    <el-button
                      icon="el-icon-close"
                      :disabled="disableFlag.state"
                      @click="handleState(0)">禁用</el-button>
                  </el-button-group>
                </el-form-item> -->
              </el-col>
              <el-col :span="12" style="text-align: right;">
                <el-form-item label="">
                  <el-input v-model="form.word" placeholder="请输入规则名称"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button
                    icon="el-icon-search"
                    @click="initTable">查询</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <cs-table :table-data="tableData"
            :table-label="tableLabel"
            @handleButton="handleButton"
            @handleSortChange="handleSortChange"
            @handleSelectionChange="handleSelectionChange"
            :table-option="tableOption">
            <template slot="use" slot-scope="scope">
              <el-tag v-if="!scope.row.use">启用</el-tag>
              <el-tag v-if="scope.row.use" type="success">禁用</el-tag>
            </template>
          </cs-table>

          <page-footer
            slot="footer"
            :current="page.current"
            :size="page.size"
            :total="page.total"
            @change="handlePaginationChange"
            style="margin:0"/>
        </div>
      </el-col>
    </el-row>
    <!-- 规则新增/修改对话框 -->
    <add-rule-dialog ref="addRuleDialog" @handleRuleRefresh="initTable"/>
    <!-- 规则组新增/修改对话框 -->
    <add-rule-group-dialog ref="addRuleGroupDialog" @handleGroupRefresh="handleGroupRefresh"/>
  </div>
</template>

<script>
import util from '@/utils/util'
import {
  selectRuleGroup,
  deleteRuleGroupItem,
  selectRuleData,
  deleteRuleItem
} from '@/api/analysis/intelligent'

export default {
  data() {
    return {
      page: {
        size: 10,
        current: 1,
        total: 0
      },
      form: {
        word: ''
      },
      disableFlag: {
        add: false,
        delete: true,
        state: true
      },
      treeTitle: '全部规则',
      addText: '新建组',
      isFalseButton: true,
      treeData: [],
      tableLabel: [
        { label: '名称', param: 'eventName', align: 'center', sortable: false, isShow: true },
        { label: '描述', param: 'description', align: 'center', isShow: true },
        { label: '是否启用', param: 'use', align: 'center', sortable: true, slot: true, isShow: true },
        { label: '创建时间',
          param: 'createTime',
          align: 'center',
          sortable: false,
          render: (row) => {
            return util.formatTimeToStr(row.createTime, 'yyyy-MM-dd')
          }
        },
        { label: '修改时间',
          param: 'updateTime',
          align: 'center',
          sortable: false,
          render: (row) => {
            return util.formatTimeToStr(row.updateTime, 'yyyy-MM-dd')
          }
        }
      ],
      tableOption: {
        label: '操作',
        width: '200',
        options: [
          { label: '编辑', type: 'primary', icon: 'el-icon-edit', methods: 'audit', auth: 'sys:group:update' },
          { label: '删除', type: 'danger', icon: 'el-icon-delete', methods: 'delete', auth: 'sys:group:delete' }
        ]
      },
      tableData: [],
      dialogTitle: '新增',
      groupDialogTitle: '新增规则组',
      ruleGroupId: ''
    }
  },
  components: {
    'CsTree': () => import('@/components/cs-tree'),
    'CsTable': () => import('@/components/cs-table'),
    'AddRuleDialog': () => import('../AddRuleDialog'),
    'AddRuleGroupDialog': () => import('../AddRuleGroupDialog'),
    'PageFooter': () => import('@/layout/header-aside/components/footer')
  },
  created() {
    this.initTree()
    this.initTable()
  },
  methods: {
    handleGroupRefresh() {
      this.$nextTick(() => {
        this.initTree()
      })
    },
    initTree() {
      selectRuleGroup()
        .then(res => {
          res.data.forEach(element => {
            element.label = element.groupName
          })

          this.treeData = util.formatDataToTree(res.data, 'groupId', 'parentId')
        })
    },
    initTable(groupId) {
      // let ruleData = JSON.parse(localStorage.getItem('ruleData'))
      // this.tableData.push(ruleData)
      let data = {
        page: this.page.current,
        limit: this.page.size,
        word: this.form.word,
        groupId: this.ruleGroupId
      }
      selectRuleData(data)
        .then(res => {
          this.tableData = res.data.records
          this.page.total = parseInt(res.data.total)
        })
    },
    handleButton(methods, row, index) {
      // 修改
      if (methods.methods === 'audit') {
        this.handleUpdate(methods.row)
      } else if (methods.methods === 'delete') { // 删除
        this.handleDelete(methods.row.id)
      }
    },
    // 排序
    handleSortChange(val) {
    },
    // 选中数据项
    handleSelectionChange(val) {
      this.multipleSelection = val
      this.disableFlag.delete = false
      this.disableFlag.state = false
    },
    // 新增
    handleCreate() {
      this.$refs.addRuleDialog.init({ groupId: this.ruleGroupId, type: 'add' }, true)
    },
    // 修改
    handleUpdate(row) {
      this.$refs.addRuleDialog.init({ ...row, type: 'update' }, true)
    },
    // 删除
    handleDelete(id) {
      this.$confirm('确定要执行该操作吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        closeOnClickModal: false
      })
        .then(() => {
          deleteRuleItem(id)
            .then(() => {
              this.initTable(this.ruleGroupId)
            })
        })
        .catch(() => {
        })
    },
    // 状态
    handleState(type) {

    },
    // 全部规则
    handleTitle() {
      this.ruleGroupId = ''
      this.initTable()
    },
    // 树形结构的操作
    handleTree(val) {
      this.$refs.addRuleGroupDialog.init(val, true)
    },
    // 树节点点击事件
    handleNodeClick(data) {
      this.ruleGroupId = data.groupId
      this.disableFlag.add = false
      this.initTable()
    },
    // 规则组删除
    handleGroupDelete(data) {
      this.$confirm('确定要执行该操作吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        closeOnClickModal: false
      })
        .then(() => {
          deleteRuleGroupItem(data.id)
            .then(() => {
              this.handleGroupRefresh()
            })
        })
        .catch(() => {
        })
    },
    handlePaginationChange() {}
  }
}
</script>

<style scoped>
</style>
